<template>
	<view>
		<cu-custom title="机构"></cu-custom>
		<view class="padding bg-white">
			<view class="flex justify-center">
				<u--image :showLoading="true" radius="10rpx" src="/static/img/2.png" width="145rpx" height="145rpx">
				</u--image>
			</view>

			<view class="text-center margin-top text-lg">
				凡尔赛钢琴大师
			</view>

			<view class="margin-top-sm flex align-center justify-center">
				<view class="text-red padding-right">评价：5.0</view>
				<view class="padding-left solid-left">
					销量：150
				</view>
			</view>

			<view class="flex flex-between margin-top-sm">
				<view class="flex align-center" style="flex: 0 0 300rpx; width: 300rpx;">
					<u-icon name="map-fill" size="36rpx" color="#999999"></u-icon>
					<view class="margin-left-xs text-cut" style="flex: 0 0 270rpx; width: 270rpx;">
						青秀区秦汉胡同国学书院3栋108室
					</view>
				</view>
				<view>
					账号：183****2455
				</view>
				<view class="">
					2.5KM
				</view>
			</view>
			
			<view class="flex justify-center margin-top">
				<view class="" style="width: 250rpx;">
					<u-button class="margin-left" color="#ea3457" type="primary" size="large" shape="circle" text="机构主页">
					</u-button>
				</view>
			</view>
		</view>

		<u--image :showLoading="true" radius="0" src="/static/img/1.png" width="750rpx" height="520rpx">
		</u--image>

		<view class="flex align-center bg-white padding">
			<text class="text-xl text-bold margin-right">凡尔赛钢琴大师</text>
			<u-rate :value="4.7" size="40rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
		</view>

		<view class="bg-white padding-bottom" style="padding: 0 100rpx 20px 100rpx">
			<view class="flex flex-between">
				<text>整体满意度：</text>
				<text>5 非常满意</text>
			</view>
			<view class="">
				<u-rate :value="5" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
			</view>

			<view class="flex flex-between margin-top-sm">
				<text>尽职度：</text>
				<text>4.6 尽职</text>
			</view>
			<view class="">
				<u-rate :value="4.7" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
			</view>

			<view class="flex flex-between margin-top-sm">
				<text>专业度：</text>
				<text>3.6 专业</text>
			</view>
			<view class="">
				<u-rate :value="4.7" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
			</view>

			<view class="flex flex-between margin-top-sm">
				<text>沟通度：</text>
				<text>2.6 偶尔</text>
			</view>
			<view class="">
				<u-rate :value="4.7" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
			</view>

			<view class="flex flex-between margin-top-sm">
				<text>超出预期度：</text>
				<text>1.6 感到失望</text>
			</view>
			<view class="">
				<u-rate :value="1.6" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
			</view>
		</view>

		<view class="flex flex-between padding-lr padding-bottom bg-white">
			<view class="flex align-center" style="flex: 0 0 400rpx; width: 400rpx;">
				<u-icon name="map-fill" size="36rpx" color="#999999"></u-icon>
				<view class="margin-left-xs text-cut" style="flex: 0 0 370rpx; width: 370rpx;">
					青秀区秦汉胡同国学书院3栋108室
				</view>
			</view>
			<view class="flex align-center text-gray">
				<text class="margin-right-xs">查看详细地址</text>
				<u-icon name="arrow-right-double" color="#999" size="24rpx"></u-icon>
			</view>
		</view>

		<view class="margin-top bg-white padding-tb-xs">
			<u-tabs @click="curriculumTypeTab" :list="curriculumTypeList" :scrollable="false" lineWidth="20"
				lineHeight="7" :lineColor="`url(/static/images/ico/active-bg.png) 100% 100%`" :activeStyle="{
			        color: '#ea3457',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#333',
			        transform: 'scale(1)'
			    }" itemStyle="padding-right: 30rpx; height: 100rpx;">
			</u-tabs>

			<!-- 课程 -->
			<view class="padding-bottom padding-lr" v-if="curriculumIndex == 0">
				<view @tap="$routerGo('/pages/mechanism/curriculum-details')" class="margin-top-lg" v-for="(item,index) in 5">
					<view class="flex flex-between">
						<view class="text-lg text-cut" style="flex: 0 0 530rpx; width: 530rpx;">
							【推荐】钢琴大师在线教导训练营
						</view>
						<view class="" style="flex: 0 0 120rpx">
							<u-button color="#ea3457" type="primary" shape="circle" text="购买"
								:customStyle="{width:'120rpx', height: '66rpx'}">
							</u-button>
						</view>
					</view>
					<view class="flex align-end">
						<view class="text-lg flex-sub">
							<text class="text-red margin-right-sm">￥209</text>
							<text class="text-gray text-decoration">￥826</text>
						</view>
						<view class="flex-sub text-right margin-top-sm">
							<view class="">
								已报<text>12553</text>人
							</view>
							<view class="margin-top-xs">
								13小时前有人消费
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 师资 -->
			<view class="margin-top padding-lr" v-if="curriculumIndex == 1">
				<view class="text-lg padding-bottom text-bold">
					师资（16）
				</view>
				<u-scroll-list indicatorWidth="0">
					<view class="margin-right-sm" v-for="(item, index) in 10" :key="index">
						<view style="width: 230rpx;">
							<u--image :showLoading="true" radius="10rpx"
								:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="230rpx"
								height="230rpx">
							</u--image>
							<view class="flex flex-between margin-top-xs">
								<text class="text-lg">史密斯</text>
								<view
									class="recommend-tap text-white text-sm flex align-center justify-center margin-left">
									推荐
								</view>
							</view>
							<view class="margin-top-xs text-center">
								主任教师
							</view>
							<view class="margin-top-xs text-sm text-gray">
								好评534 | 2.2w预约
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>

			<!-- 动态消息 -->
			<view class="margin-top" v-if="curriculumIndex == 2">
				<view class="text-lg padding-lr padding-bottom text-bold">
					动态信息（16）
				</view>
				<view class="" v-for="(item,index) in 3" :key="index">
					<u-gap height="20rpx" bgColor="#f4f4f4"></u-gap>
					<view class="padding-lr">
						<view class="flex flex-between margin-top">
							<view class="flex flex-sub align-center">
								<u--image :showLoading="true" radius="10rpx"
									:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="120rpx"
									height="120rpx">
								</u--image>

								<view class="margin-left-sm">
									<view class="flex">
										<view class="text-cut text-lg">
											史密夫
										</view>
										<view class="margin-left-xs text-gray">
											主任教师
										</view>
										<view
											class="recommend-tap2 text-white text-sm flex align-center justify-center margin-left-sm">
											官方推荐
										</view>
									</view>

									<view class="margin-top-sm">
										小学·生物 | 天津
									</view>
								</view>
							</view>
							<view class="" style="flex: 0 0 150rpx">
								<u-button color="#ea3457" plain type="primary" shape="circle" text="关注"
									:customStyle="{width:'120rpx', height: '66rpx'}">
								</u-button>
							</view>
						</view>

						<view class="margin-top-sm flex align-center">
							<view style="flex: 0 0 120rpx">
								<u-button color="#999" plain type="primary" shape="circle" text="独立老师" size="mini"
									:customStyle="{width:'120rpx', height: '46rpx'}">
								</u-button>
							</view>

							<view class="margin-left-sm text-gray">
								评分：5.0分 | 教龄：6年 | 粉丝：357人
							</view>
						</view>

						<view class="margin-top-sm">
							母爱是黑夜中的启明星，为我们照亮前进的道路;母爱是沙漠中的小溪流，为我们解除难耐的饥渴；母爱是机车中的汽油，为我们带给前进的动力
						</view>
						<view class="padding-tb solid-bottom">
							<u--image :showLoading="true" radius="10rpx"
								:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="400rpx"
								height="400rpx">
							</u--image>
						</view>
						
						<view class="flex text-gray text-center padding-tb">
							<view class="flex-sub solid-right">
								阅读 2024
							</view>
							<view class="flex-sub solid-right">
								点赞 0
							</view>
							<view class="flex-sub solid-right">
								转发 5
							</view>
							<view class="flex-sub">
								评论 10
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评论 -->
			<view class="padding padding-bottom"  v-if="curriculumIndex == 3">
				<view class="text-lg text-bold" @tap="$routerGo('/pages/mechanism/comment-list')">
					用户评论（13545）
				</view>
				<comment/>
			</view>
		</view>
		
		<!-- 更多机构 -->
		<view class="margin-top padding bg-white">
			<view class="text-lg text-bold">
				更多机构
			</view>
			
			<view @tap="$routerGo('/pages/mechanism/index')" class="margin-top-lg padding-lr-xs" v-for="(item,index) in 3" :key="index">
				<view class="flex align-center">
					<u--image :showLoading="true" radius="10rpx"
						:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="160rpx"
						height="160rpx"></u--image>
					<view class="flex-sub margin-left-sm">
						<view class="flex">
							<view class="text-cut text-lg text-bold" style="flex: 0 0 425rpx; width: 425rpx;">
								凡尔赛钢琴大师</view>
							<view class="margin-left">
								<u-icon name="more-dot-fill" color="#999999"></u-icon>
							</view>
						</view>
			
						<view class="margin-top-xs flex align-center">
							<view class="text-red padding-right">评价：5.0</view>
							<view class="padding-left solid-left">
								销量：150
							</view>
						</view>
			
						<view class="flex flex-between margin-top-sm">
							<view class="flex align-center">
								<u-icon name="map-fill" size="36rpx" color="#999999"></u-icon>
								<view class="margin-left-xs text-cut" style="flex: 0 0 270rpx; width: 270rpx;">
									青秀区秦汉胡同国学书院3栋108室
								</view>
							</view>
							<text class="margin-left-sm">
								42.2KM
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import comment from './components/comment.vue'	//评论
	export default {
		components:{
			comment
		},
		data() {
			return {
				//课程分类列表
				curriculumIndex: 0,
				curriculumTypeList: [{
					name: '课程'
				}, {
					name: '师资',
				}, {
					name: '动态消息',
				}, {
					name: '评论'
				}],
			}
		},
		onShow() {

		},
		methods: {
			//切换Tab
			curriculumTypeTab(item) {
				this.curriculumIndex = item.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend-tap {
		width: 66rpx;
		height: 30rpx;
		background-image: url('/static/images/ico/tag-2.png');
		background-size: 100% 100%;
		flex: 0 0 66rpx;
	}

	.recommend-tap2 {
		width: 110rpx;
		height: 36rpx;
		background-image: url('/static/images/ico/tag-2.png');
		background-size: 100% 100%;
		flex: 0 0 110rpx;
	}
</style>
